import { Component, OnInit, Input, OnChanges } from '@angular/core';
import { v4 as uuidv4 } from 'uuid';
@Component({
  selector: 'app-g2-line',
  templateUrl: './g2-line.component.html',
  styleUrls: ['./g2-line.component.scss']
})
export class G2LineComponent implements OnInit, OnChanges {
  @Input() data = null;
  id = uuidv4();
  charts = null;
  constructor() { }

  ngOnInit() {
  }
  configureChart(chart) {
    // if (this.charts) {
    //   this.charts.destory();
    // }
    this.charts = chart;
    this.charts.data(this.data);
    this.charts.scale({
      year: {
        range: [0, 1],
      },
      value: {
        min: 0,
        nice: true,
      },
    });
    this.charts.tooltip({
      showCrosshairs: true, // 展示 Tooltip 辅助线
      shared: true,
    });
    this.charts.line().position('name*value').label('value');
    this.charts.point().position('name*value');
    this.charts.render();
  }

  ngOnChanges() {
    if (this.charts){
      this.charts.changeData(this.data);
      this.charts.render();
    }
  }
}
